---
import Layout from "@layouts/Layout.astro";
import '@styles/news.scss'
---

<Layout>
<main class="responsive-wrapper">
	<div class="page-title">
		<h1>最近的想法</h1>
	</div>
	<div class="magazine-layout">
		<div class="magazine-column">
			<article class="article">
				<h2 class="article-title article-title--large">
					<a href="/mono_notes/editor" class="article-link">editor<mark class="mark mark--primary">Ajn404</mark> <span>---- notion style editor </span></a>
				</h2>
				<div class="article-excerpt">
					<p>是否可以在博客中放一个开关,打开开关时提供这样一个功能</p>
					<p>能在当前页面画任意方向的箭头，备注或者图案，并导出为图片（按钮）
				</div>
				<div class="article-author">
					<div class="article-author-img">
						<img src="/mono_notes/assets/ajn404.jpeg" />
					</div>
					<div class="article-author-info">
						<dl>
							<dt>Ajn404</dt>
							<dd>Coder</dd>
						</dl>
					</div>
				</div>
			</article>
			<article class="article">
				<h2 class="article-title article-title--medium">
					<a href="#" class="article-link">听说chrome提供了一个读写本地文件的api</a>
				</h2>
				<div class="article-creditation">
					<p>那么我是不是可以在博客系统内提供一个写博客文章的编辑器，写完后添加文章到指定目录，这部分文章可以指定一个分类</p>
				</div>
			</article>
		</div>
		<div class="magazine-column">
			<article class="article">
				<figure class="article-img">
					<img class="w-full" src="/mono_notes/assets/xiaoGong.jpg" />
				</figure>
				<h2 class="article-title article-title--medium">
					<a href="#" class="article-link">How 7 Lines of Code Turned Into a $36 Billion Empire</a>
				</h2>
				<div class="article-excerpt">
					<p>hahahahahha ... time to leave and i am tired of stupid codes</p>
				</div>
				<div class="article-author">
					<div class="article-author-img">
						<img src="/mono_notes/assets/ajn404.jpeg" />
					</div>
					<div class="article-author-info">
						<dl>
							<dt>James Robert</dt>
							<dd>Editor</dd>
						</dl>
					</div>
				</div>
			</article>
		</div>
		<div class="magazine-column">
			<article class="article">
				<figure class="article-img">
					<img src="https://images.unsplash.com/photo-1512521743077-a42eeaaa963c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80" />
				</figure>
				<h2 class="article-title article-title--small">
					<a href="#" class="article-link">To Become <mark class="mark mark--secondary">Happier</mark>, Ask Yourself These Two Questions Every Night</a>
				</h2>
				<div class="article-creditation">
					<p>By Jonathan O'Connell</p>
				</div>
			</article>
			<article class="article">
				<figure class="article-img">
					<img src="/mono_notes/assets/tao.jpeg" />
				</figure>
				<h2 class="article-title article-title--small">
					<a href="#" class="article-link">什么东西都想接触，什么东西都摸一摸就放弃，算了，研究方法论算了，真正的开始研究，做有打算的练习</a>
				</h2>
				<div class="article-creditation">
					<p>By Jonathan O'Connell</p>
				</div>
			</article>
		</div>
		<div class="magazine-column">
			<article class="article">
				<h2 class="article-title article-title--medium">
					<a href="#" class="article-link">Traveller Visiting Ice Cave With Amazing Eye-Catching Scenes</a>
				</h2>
				<div class="article-excerpt">
					<p>Slack has become indispensible for many businesses operation remotely during the pandemic. Here's what the acquisition could mean for users...</p>
				</div>
				<div class="article-author">
					<div class="article-author-img">
						<img src="/mono_notes/assets/ajn404.jpeg" />
					</div>
					<div class="article-author-info">
						<dl>
							<dt>James Robert</dt>
							<dd>Editor</dd>
						</dl>
					</div>
				</div>
			</article>
			<article class="article">
				<small class="article-category">
					<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="22" viewBox="0 0 28 22">
  <defs>
    <clipPath id="clip-headphones">
      <rect width="28" height="22"/>
    </clipPath>
  </defs>
  <g id="headphones" clip-path="url(#clip-headphones)">
    <g id="Group_2" data-name="Group 2" transform="translate(-3680 -609)">
      <path id="Subtraction_1" data-name="Subtraction 1" d="M5,12H5A5.274,5.274,0,0,1,0,6.5,5.274,5.274,0,0,1,5,1V12Z" transform="translate(3680 619)"/>
      <rect id="Rectangle_18" data-name="Rectangle 18" width="2" height="11" transform="translate(3686 620)"/>
      <path id="Subtraction_5" data-name="Subtraction 5" d="M1.243,12H.045C.015,11.67,0,11.334,0,11A11,11,0,0,1,18.778,3.222,10.925,10.925,0,0,1,22,11c0,.331-.015.667-.045,1h-1.2a14.108,14.108,0,0,0-2.685-6.241A8.982,8.982,0,0,0,11,2,8.982,8.982,0,0,0,3.929,5.759,14.109,14.109,0,0,0,1.243,12Z" transform="translate(3683 609)"/>
      <path id="Subtraction_6" data-name="Subtraction 6" d="M5,0H5A5.274,5.274,0,0,0,0,5.5,5.274,5.274,0,0,0,5,11V0Z" transform="translate(3708 631) rotate(180)"/>
      <rect id="Rectangle_23" data-name="Rectangle 23" width="2" height="11" transform="translate(3700 620)"/>
      <path id="Path_8" data-name="Path 8" d="M.156-.031,2.125-1.687,2,2H0Z" transform="translate(3683 619)"/>
      <path id="Path_9" data-name="Path 9" d="M1.969-.031,0-1.687.125,2h2Z" transform="translate(3702.875 619)"/>
    </g>
  </g>
</svg>
					<span>Post Reports / Podcast</span>
				</small>
				<h2 class="article-title article-title--medium">
					<a href="#" class="article-link">Things to Do After 6 P.M Will Enrich <mark class="mark mark--tertiary">Your Life</mark></a>
				</h2>
				<div class="article-podcast-player">
					<button class="podcast-play-button">
						<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="#000000" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><path d="M232.3125,114.34375,88.34375,26.35937A15.99781,15.99781,0,0,0,64,40.00781V215.99219a16.00521,16.00521,0,0,0,24.34375,13.64843L232.3125,141.65625a16.00727,16.00727,0,0,0,0-27.3125Z"></path></svg>
					</button>
					<div class="podcast-progression">
						
					</div>
					<span class="podcast-time">23:45</span>
				</div>
				<div class="article-podcast-info">
					Apple Podcasts, Google Podcasts, Stitcher
				</div>
				<div class="article-author">
					<div class="article-author-img">
						<img src="/mono_notes/assets/ajn404.jpeg" />
					</div>
					<div class="article-author-info">
						<dl>
							<dt>N-Graymoon</dt>
							<dd>Frontender</dd>
						</dl>
					</div>
				</div>
			</article>
		</div>
	</div>
</main>
</Layout>
